<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<image src="/static/logo.png" mode=""></image>
					<view class="nicheng">设置你的昵称,头像</view>
					<view class="zhanshi">用于展示用户信息</view>
				</view>
			</tui-list-cell>
			<radio-group>
				<tui-list-cell  padding='10rpx 30rpx'  @click="tabs(1)">
					<label class="tui-pay-item">
						<text class="text">头像</text>
						<view class="tui-radio">
							<button class=" flex flex-align " open-type="chooseAvatar" @chooseavatar="getupload">
								<image :src="headerimg" mode=""></image>
							</button>
						</view>
					</label>
				</tui-list-cell>
				<tui-list-cell  padding='10rpx 30rpx' @click="tabs(2)">
					<label class="tui-pay-item">
						<text class="text">昵称</text>
						<view class="tui-radio" style="margin-left: 20rpx;">
							<input type="nickname" placeholder="请输入微信昵称"  @blur="getName">
						</view>
					</label>
				</tui-list-cell>
				
				
			</radio-group>
			<view class="tui-btn-pay flex flex-align">
				<view class="flex-1"  @click="close" style="margin-right: 20rpx;background: #f1f1f1;color: #999;">拒绝</view>
				<view class="flex-1"  @click="btnPay">确认</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	export default {
		name: 'tuiLogin',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			page:{
				type:Number,
				default:1
			},
			data:{
				type:Object,
				default: function() {
					return {
						money: 0, 
						yue: 60
					}
				}
			},
		},
		data() {
			return {
				index:1,
				headerimg:'http://draft.wyc168.com/upload/87/83b3a1e0029cacc73fb898f2d275a4.png',
				nickname:''
			};
		},
		ready(){
			console.log(1111)
		},
		created(){
			console.log(2222)
		},
		methods: {
			close() {
				
				this.$emit("close",{})
			},
			getupload(e){
				let that = this
				that.headerimg = e.target.avatarUrl
				// that.tui.request("api.auth.center/set", "PUT",{headimg:e.target.avatarUrl} , false, true, true).then((res) => {
				// 	that.tui.toast(res.info)
				// 	if(res.code==1){
				// 		setTimeout(()=>{
				// 			 that.getData()
				// 		},1500)
				// 	}
					
				// }).catch((res) => {})
			},
			getName(e){
				this.nickname = e.detail.value
			},
			btnPay(){
				let that = this
				that.close();
				console.log(that.nickname )
				console.log(that.headerimg )
				// this.$emit("finish",this.index)
				that.tui.request("api.auth.center/set", "post",{headimg:that.headerimg,nickname:that.nickname} , false, true, true).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						uni.$emit("isLogin",1)
					}
					
				}).catch((res) => {})
			},
			tabs(e){
				this.index = e
			},
		}
	}
</script>

<style scoped lang="scss">
	.tui-pay-item__title {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		.nicheng{font-size: 34rpx;font-weight: bold;margin-bottom: 10rpx;}
		.zhanshu{color: #999;font-size: 24rpx;}
		image{width: 144rpx;height: 144rpx;}
	}
	.close{
		position: absolute;top: 0rpx;right: 20rpx;
	}
	.tui-pay-amuont {
		padding-top: 30rpx;
		color: #000;
		text-align: center;
		font-weight: 500;
		font-size: 40rpx;font-weight: bold;
	}
	.text{margin-left: 20rpx;}
	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		button{background: transparent;
			image{width: 80rpx;height: 80rpx;}
		}
	}

	.tui-btn-pay {
		width: 100%;
		padding: 100rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
		view{background: #f20;text-align: center;line-height: 90rpx;color: #fff;}
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>